<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_过渡&动画1</title>
    <style>
        /*显示/隐藏的过滤效果 */
        .xxxx-enter-active, .xxxx-leave-active {
            transition: opacity .5s;
        }
        /*隐藏时的样式 */
        .xxxx-enter, .xxxx-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0;
        }
        .move-enter-active {
            transition: all 1s;
        }
        .move-leave-active{
            transition: all 4s;
        }
        .move.enter ,.move-leave-to{
            opacity: 0;
            transform: translateX(20px)
        }


    </style>
</head>

<body>
<!--
1.vue动画的理解
    操作css的transition或animation
    vue会给目标元素添加/移除特定的class
2.基础过渡动画的编码
    1).在目标元素外包裹<transition name=''>
    2).定义class样式
        1>.指定过渡样式：transition
        2>.指定隐藏时的样式：opacity/其他
3.过渡的类名
    xxx-enter-active:指定显示的transition
    xxx-lave-active: 指定隐藏的transition
    xxx-enter: 指定隐藏时的样式
-->

<div id="example">
    <button @click="isShow=!isShow">toggle</button>
    <transition name="xxxx">
    <p v-show="isShow">Hello</p>
    </transition>
</div>
<div id="example2">
    <button @click="isShow=!isShow">toggle</button>
    <transition name="move">
    <p v-show="isShow">Hello</p>
    </transition>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">

const vm =new Vue({
    el:'#example',
    data:{
        isShow:true
    }
})

new Vue({
    el:'#example2',
    data:{
        isShow:true
    }
})

</script>


</body>
</html>